<template>
	<basic-container>
		<avue-crud :option="option" :data="data" @row-del="rowDel" :before-open="beforeOpen">
			<template slot-scope="{row}" slot="quantity">
				<el-input-number style="width: 100px;" v-model="row.quantity" :min="0" controls-position="right"></el-input-number>
			</template>
		</avue-crud>
		<el-dialog title="订单详情" :visible.sync="dialogShow" v-if="dialogShow" append-to-body>
			<orderDtl @closeMoule="closeMoule" :orderCode="orderCode">
			</orderDtl>
		</el-dialog>
	</basic-container>
</template>

<script>
	import orderDtl from './orderDtl.vue'

	export default {
		components: {
			orderDtl
		},
		props: {
			data: [],
			orderCode: ''
		},
		data() {
			return {
				dialogShow: false,
				option: {
					border: true,
					refreshBtn: false,
					editBtn: false,
					simplePage: true,
					menuWidth: '80px',
					column: [{
							label: "条码",
							prop: "barCode"
						}, {
							label: "本次入库",
							prop: "quantity",
							slot: true,
							width: 150
						}
					]
				}
			};
		},
		created() {},
		methods: {
			closeMoule(e) {
				this.dialogShow = false;
				if (!Array.isArray(this.data)) {
					this.data = [];
				}
				e.forEach(ele => {
					if (!this.data.some(v => v.orderCode == ele.orderCode && v.barCode == ele.barCode)) {
						this.data.push(ele)
					}
				})
			},
			beforeOpen(done, type) {
				if (["edit", "add"].includes(type)) {
					if (Array.isArray(this.orderCode)) {
						this.orderCode = this.orderCode.join(',');
					}
					if (this.orderCode == undefined || this.orderCode.length == 0) {
						this.$message.warning("请选择入库订单");
						return;
					}
					this.dialogShow = true;
				}
			},
			rowDel(row) {
				this.$confirm("确定数据删除?")
					.then(() => {
						//this.data = this.data.filter(v => !(v.orderCode == row.orderCode && v.barCode == row.barCode))
						for (var i=0;i<this.data.length;i++)
						{ 
							if (this.data[i].orderCode == row.orderCode && this.data[i].barCode == row.barCode) {
								this.data.splice(i,1);
								break;
							}
						}
					});
			}
		}
	};
</script>

<style>
</style>
